<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实战首页布局</title>

<style>
    #container{
        background: grey;
        width: 1002px;
    }

    #header{
        height：100px;
        background: orange;
    }

    #main{
        height: 400px;
        background: green;
    }

    #lside{
        height: 400px;
        width: 700px;
        background: aquamarine;
        float: left;
    }

    #rside{
        height: 400px;
        width: 302px;
        background: chartreuse;
        float: right;
    }

    #footer{
        background: blue;
        height: 120px;
    }

</style>

</head>
<body>
    <div id="container">
        <div id="header">header</div>
        <div id="main">
            <div id="lside">lside</div>
            <div id="rside">rside</div>
        </div>
        <div id="footer">footer</div>
    </div>
</body>
</html>